// 实现懒数据加载
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
import veeValidateSchema from '@/utils/vee-validate-schema'
import Message from '@/components/library/Message'

import { ref } from 'vue'
// stop 是停止观察是否进入或移出可视区域的行为
// box 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
// isIntersecting 是否进入可视区域，true是进入 false是移出
// observerElement 被观察的dom
export const useLazyData = (apiFn) => {
  // 需要
  // 1. 被观察的对象
  // 2. 不同的API函数
  const result = ref([])
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }], observerElement) => {
      if (isIntersecting) {
        stop()
        //   调用api
        apiFn && apiFn().then(data => {
          result.value = data.result
        })
      }
      // threshold 容器和可视区交叉的占比（进入的面积/容器完整面试） 取值，0-1 之间，默认比0大，所以需要滚动较多才能触发进入可视区域事件。
    }, { threshold: 0 }
  )
  console.log(target)
  return { target, result }
}

// 定时器
export const userTimer = (apiFn, form) => {
  // ref
  const formCom = ref(null)
  const number = ref(0)
  // 定时器
  const { resume, pause } = useIntervalFn(() => {
    number.value--
    if (number.value <= 0) {
      // 停止定时器
      pause()
    }
  }, 1000, { immediate: false })
  // 点击发送验证码
  const send = async () => {
    const valid = veeValidateSchema.mobile(form.mobile)
    // 手机校验通过后才粗发定时器
    if (valid === true) {
      // 还没结束静止在点击
      if (number.value !== 0) return

      try {
        // 发送验证码
        await apiFn()
        Message({ type: 'success', message: '发送验证码成功' })
        number.value = 60
        resume()
      } catch (err) {
        // console.dir(err)
        Message({ type: 'error', message: err.response.data.message || '验证码已发送，稍后再试' })
      }
    } else {
      // (要校验的字段，提示的信息)
      formCom.value.setFieldError('mobile', valid)
    }
  }
  return { formCom, number, send }
}
